package com.kmmlearn.findtime.android.ui.animation

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.animateDp
import androidx.compose.animation.core.updateTransition
import androidx.compose.animation.expandVertically
import androidx.compose.animation.shrinkVertically
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TransitionDemo() {
    var selected by remember { mutableStateOf(false) }
    // 创建动画
    val transition = updateTransition(targetState = selected)
    val borderColor by transition.animateColor {
        if (it) Color.Red else Color.Gray
    }

    val elevationVal by transition.animateDp {
        if (it) 10.dp else 2.dp
    }

    Surface(
        onClick = { selected = !selected },
        shape = RoundedCornerShape(8.dp),
        border = _root_ide_package_.androidx.compose.foundation.BorderStroke(2.dp, borderColor),
        elevation = elevationVal
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Text(
                "Hello Transition!!!",
                modifier = Modifier.align(Alignment.CenterHorizontally),
                textAlign = TextAlign.Center
            )
            transition.AnimatedVisibility(
                visible = { it },
                enter = expandVertically(),
                exit = shrinkVertically()
            ) {
                Text("This is a good Day!!!")
            }
            transition.AnimatedContent {
                if (it) {
                    Text("Selected")
                } else {
                    Text("Not Selected")
                }
            }
        }
    }

}

@Preview
@Composable
fun TransitionDemoPreview() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .fillMaxHeight(),
        contentAlignment = Alignment.Center
    ) {
        TransitionDemo()
    }
}